<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="../index.css">
	<script type="text/javascript" src="../index.js"></script>
	<title>GridManager:万条不卡</title>
	<style>
		html, body{
			width: 100%;
			height: 100%;
			overflow-x:hidden;
			margin: 0;
			padding: 0;
		}
		h2{
			font-size:22px;
			padding:10px 30px;
			color:#333;
		}
		p{
			font-size:14px;
			padding:10px 30px;
			color:#333;
			text-indent:2em;
			margin: 0;
		}
		hr{
			margin-top: 18px;
			margin-bottom: 18px;
			border: 0;
			border-top: 1px solid #eee;
		}
		.table-main{
			height: calc(100% - 52px);
		}
		.bottom-bar{
			background: #f8f8f8;
			padding: 10px;
			margin-top: 10px;
		}
		.bottom-bar button{
			padding: 5px 20px;
			margin-right: 10px;
		}
		.bottom-bar a{
			font-size: 12px;
			padding: 5px 20px;
			margin-right: 10px;
		}
	</style>
</head>

<body>
<div class="table-main">
	<table grid-manager="cccc"></table>
</div>
<div class="bottom-bar">
	<a href="https://github.com/baukh789/GridManager/blob/master/src/demo/demo10.html" target="_blank">查看源码</a>
	<button id="change-auto-play"></button>
</div>

<script>
	const getData = num => {
		const data = [];
		let child = [];

		for (let i = 1; i<= num; i++) {
			data.push({
				"id": i,
				"name": `baukh-${i}`,
				"age": "28",
				"createDate": "2015-03-12",
				"info": "野生前端程序"
			});
		}

		return data;
	};
	var ajaxData = {
		"data": getData(10000),
		"totals": 10000
	};
</script>
<script type="text/javascript">
	// 用于demo初始化，以及切换button显示状态
	window.supportAutoPlay = true;

	// 实例化
	const now = Date.now();
	var table = document.querySelector('table[grid-manager]');
	function init(){
		table.GM({
			gridManagerName:'test',
			supportAjaxPage: false,
			virtualScroll: {
				useVirtualScroll: true,
				virtualNum: 40
			},
			height: '100%',
			ajaxData,

			cellHover: (row, rowIndex, colIndex, td) => {
				return {
					text: `当前第${rowIndex + 1}行, 第${colIndex + 1}列`
				};
			},
			// 支持导出表格数据
			supportAutoPlay: window.supportAutoPlay,
			autoPlayConfig: {
				// 每次轮播结束后停顿的时间
				interval: 5,

				// 每帧滚动的距离(px)
				step: 500
			},
			exportConfig: {
				handler: (fileName, query, pageData, sortData, selectedList, tableData) => {
					GM.showLoading('test');
					GM.hideLoading('test', 500);
				}
			},
			checkboxConfig: {
				key: 'id'
			},
			// summaryHandler: function(data){
			// 	let num = 0;
			// 	data.forEach(item => {
			// 		num += parseInt(item.age, 10);
			// 	});
			// 	return {
			// 		name: '平均年龄',
			// 		age: num / data.length
			// 	};
			// },
			columnData: [{
				key: 'name',
				remind: 'the username',
				sorting: 'up',
				width: '200px',
				text: 'username'
			},{
				key: 'age',
				remind: 'the age',
				sorting: '',
				width: '200px',
				text: 'age'
			},{
				key: 'info',
				remind: 'the info',
				sorting: '',
				text: 'info'
			},{
				key: 'createDate',
				text: '创建时间',
				remind: 'the createDate',
				sorting: 'down',
				width: '200px',
				fixed: 'right'
			}
			]
		});
	}
	init();
</script>
<script>
	const button = document.querySelector('#change-auto-play');
	button.innerText = window.supportAutoPlay ? '停止轮播' : '开启轮播';
	button.addEventListener('click', function (){
		if (window.supportAutoPlay) {
			window.GM.stopAutoPlay('test');
			this.innerText = '开启轮播';
		} else {
			window.GM.startAutoPlay('test');
			this.innerText = '停止轮播';
		}
		window.supportAutoPlay = !window.supportAutoPlay;
	});
</script>
</body>
</html>
